<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>rotate-film-card</title>
	<link rel="stylesheet" href="css/hb.css">
</head>

<body>
	<div id="app">
		<div id="top" style="display: none;">
			<!-- 音频 -->
			<audio controls="controls" autoplay="autoplay" loop="loop">
				<source src="./music/001.mp3">
				</source>
			</audio>
		</div>
		<!-- 改写试图  为模板字符串 渲染数据 -->
		<div class="warp" id="warp">
			<!-- 活动的div -->
			<div class="photo  photo_front" onclick="turn(this)" id="photo_{{index}}">
				<!-- photo负责海报位置和旋转 -->
				<div class="photo-wrap">
					<!-- photo-wrap负责翻转正反面 -->
					<!-- 正面： -->
					<div class="side side-front">
						<p class="image">
							<img src="img/{{img}}" alt="">
						</p>
						<p class="caption">{{caption}}</p><!-- 标题 -->
					</div>

					<!-- 反面： -->
					<div class="side side-back">
						<p class="desc">{{desc}}</p><!-- 描述信息 -->
					</div>
				</div>

			</div>

		</div>

</body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="img/data.js"></script>
<script src="js/hb.js"></script>

</html>